<!DOCTYPE html>
<html>
<head>

<!-- meta tags -->
<meta charset="utf-8">
<meta name="keywords" content="bootstrap 4, premium, multipurpose, ecommerce, html5, CSS" />
<meta name="description" content="Bootstrap 4 Landing Page Template" />
<meta name="author" content="www.themesground.com" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Title -->
<title>菜谱-佩奇牧场</title>

  <!-- Favicon Icon -->
  <link rel="shortcut icon" href="../assets/images/pagepig.ico" />

  <!-- inject css start -->

  <link href="../assets/css/theme-plugin.css" rel="stylesheet" />
  <link href="../assets/css/theme.min.css" rel="stylesheet" />
  <link href="../assets/css/all.css" rel="stylesheet" />
  <link href="../assets/css/category2.css" rel="stylesheet" />
  <link href="../assets/css/all3.css" rel="stylesheet"/>
  <link href="../assets/css/recipe_newone.css" rel="stylesheet"/>

  <!-- inject css end -->
<style>
  .img_Box{
    margin:0 auto;
  }
  .h2{
    display: inline;
  }
  .kit{
    margin-bottom: 52px;
  }
  #cen{
    width: 640px;
    margin: 0 auto;
  }
</style>
</head>

<body>

<!-- page wrapper start -->
<!-- 引入头部 -->
<div class="head"></div>
<div class="page-wrapper">

  <!-- preloader start -->

  <div id="ht-preloader">
    <div class="loader clear-loader"> <img class="img-fluid" src="../assets/images/loader.gif" alt=""> </div>
  </div>

  <!-- preloader end -->


  



<!--hero section start-->

<section class="bg-light py-6">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6">
        <h1 class="h2 mb-0">犒劳一下自己的胃</h1>

      </div>
      
    </div>
    <!-- / .row -->
  </div>
  <!-- / .container -->
</section>

<!--hero section end--> 

<div class="container">

  <div id="cen">
  <div class="space_box_home">

    <div class="recipDetail" >
      <div class="img_Box"  >
      </div>

      <blockquote class="block_txt" id="block_txt" >

      </blockquote>
      <div class="mo mt20">
        <h3>食材明细</h3>
      </div>
      <fieldset class="particulars">
        <legend>主料</legend>
        <div class="recipeCategory_sub_R clear">
          <ul id="zhuliao">
          </ul>
        </div>
      </fieldset>
      <fieldset class="particulars">
        <legend>辅料</legend>
        <div class="recipeCategory_sub_R clear">
          <ul id="fuliao">
          </ul>
        </div>
      </fieldset>

      <div class="recipeCategory_sub_R mt30 clear" style="width:646px" >
        <ul id="qita">
        </ul>
      </div>
      <div class="mo mt20">
        <h3>自制猪肉脯的做法步骤</h3>
      </div>
      <div class="recipeStep">
        <ul id="step">
        </ul>
        <div id="comment_top" class="mt20">

        </div>



        <div class="recipeComment mt30" id="comment"></div>
      </div>
      <div class="mo">
        <h3>小窍门</h3>
      </div>
      <div class="recipeTip tip">

      </div>
      <div class="recipeTip mt16 kit">

      </div>
      <!--recipDetail-->
    </div>
    <!--space_box_home-->
  </div>

  </div>
	
</div>


  <!--底部 start-->
  <!-- 引入尾部 -->
  <div class="footer"></div>
 
<!--back-to-top start-->

<div class="scroll-top"><a class="smoothscroll" href="#top"><i class="las la-angle-up"></i></a></div>

<!--back-to-top end-->

<!-- inject js start -->
  <script src="../assets/js/jquery-3.5.1.min.js"></script>
  <script src="../assets/js/popper.min.js"></script>
  <script src="../assets/js/bootstrap.min.js"></script>
<!--  <script src="../assets/js/owl.carousel.min.js"></script>-->
  <script src="../assets/js/light-slider.js"></script>
  <script src="../assets/js/parallax.js"></script>
  <script src="../assets/js/magnific-popup.min.js"></script>
  <script src="../assets/js/jquery.countdown.min.js"></script>
  <script src="../assets/js/jquery.dd.min.js"></script>
  <script src="../assets/js/validator.js"></script>
  <script src="../assets/js/wow.js"></script>
  <script src="../assets/js/theme-script.js"></script>
  <script>
    $(document).ready(function(){

      $('.head').load('head.html',function () {
        doGetObjects();
      });
      $('.footer').load('footer.html');

    });
    function doGetObjects(){
      let url="/recipes/doFindRecipesById";
      let params={id:[[${id}]]};
      $.getJSON(url,params,function(result){
        console.log(result)
        if (result.status==200){
          doCreatedhead(result.data);
          doCreatedDescribe(result.data);
          doCreatedDetial(result.data.condiments);
          doCreatedQita(result.data);
          doCreatedStep(result.data);
          doCreatedTipsAndTit(result.data);
        }

      });
    }

    function doCreatedTipsAndTit(data) {
      console.log(data.tips)
        $(".tip").text(data.tips);
        $(".kit").append("使用的厨具："+data.kitchenware);
    }
    function doCreatedStep(data) {
      for (let i=0;i<data.productions.length;i++){
        let li = ` <li>
                        <div class="recipeStep_img">
                            <img src="${data.productions[i].stepImage}" alt="${data.menuName}的做法步骤：${i+1}">
                        </div>
                        <div class="recipeStep_word"><div class="recipeStep_num">${i+1}</div>${data.productions[i].stepDescription}</div>
                    </li>`
        $("#step").append(li);
      }


    }
    function doCreatedQita(data) {
      let ul = `<li>
                    <span class="category_s1">
                            <a title="${data.flavor}"  target="_blank">${data.flavor}</a>
                    </span>
                    <span class="category_s2">口味</span>
                  </li>
                            <li>
                                <span class="category_s1">
                                    <a title="${data.technology}"  target="_blank">${data.technology}</a>
                                </span>
                                <span class="category_s2">工艺</span>
                            </li>
                            <li>
                                <span class="category_s1">
                                    <a title="${data.needTime}"  target="_blank">${data.needTime}</a>
                                </span>
                                <span class="category_s2">耗时</span>
                            </li>
                            <li>
                                <span class="category_s1">
                                    <a title="${data.difficulty}"  target="_blank">${data.difficulty}</a>
                                </span>
                                <span class="category_s2">难度</span>
                            </li>`
      $("#qita").append(ul);
    }
    function doCreatedDetial(details) {
      for (let i=0;i<details.length;i++){
        if(details[i].groupName=="主料"){
          let li=`<li> <span class="category_s1">
                    <a title="${details[i].ingredientsName}">${details[i].ingredientsName}</a>
                 </span>
                 <span class="category_s2">${details[i].dosage}</span>
                  </li>`
          $("#zhuliao").append(li);
        }else  if (details[i].groupName=="辅料"){
          let li=` <li> <span class="category_s1">
                    <a  title="${details[i].ingredientsName}">${details[i].ingredientsName}</a>
                 </span>
                 <span class="category_s2">${details[i].dosage}</span> </li>`
          $("#fuliao").append(li);
        }
      }


    }
    function doCreatedhead(data) {
      let head1 = `<a class="J_photo" title="${data.menuName}的做法"><span></span><img
                                src="${data.finishedImg}"
                                alt="${data.menuName}的做法"> </a> `
      $(".img_Box").append(head1);
    }
    function doCreatedDescribe(data) {
      let div=`<div id="block_txt1"><span class="txt_tart">“</span>${data.described}<span class="txt_end">” </span>
        </div>`;
      $("#block_txt").append(div);
    }
  </script>


<!-- inject js end -->

</body>
</html>
